<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="false" title="AI创作大赛投稿" class="my-nav-ber-a-box mallunavbar"></unavbar>
	
		<view class="mall_concent" >

	

			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">选择大赛</view>
				</view>
			</view>
			<view class="u-p-l-32 u-p-r-32 u-m-b-20">
				<view @click="goodshow = true" class="input1 pop text-center u-h-90" style="padding:0">
					{{goodsName || '选择作品'}}
					<image src="/static/images/img/37.png" class="m1" style="width:22rpx;height:12rpx"></image>
				</view>
			</view>
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-between align-center w100" style="width:100%">
					<view class="flex justify-between align-center">
						<image src="/static/images/34.png" class="img-16" mode=""></image>
						<view class="text">选择AI创作</view>
					</view>
					<view class="q1" @click="goPage">前往创作</view>
				</view>
			</view>
			<view class="u-p-l-32 u-p-r-32">
				<view class="ai-images" v-for="(item, index) in imagesList.data" :key="index" v-if="item.checked">
					<image :src="item.picture_url" style="width: 100%;" @click="imagesListShow=!imagesListShow"></image>
				</view>
				<view v-if="!imagesChecked" class="input1 pop text-center" style="padding:0">					
				
					<view class="selecte-image" @click="imagesListShow=!imagesListShow">
					<image src="/static/images/uppic.png" style="width:45rpx;height:45rpx" />
					
					<view style="margin-left: 20rpx;">选择图片</view>
					
					</view>
				</view>
			</view>
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-between align-center w100" style="width:100%">
					<view class="flex justify-between align-center">
						<image src="/static/images/34.png" class="img-16" mode=""></image>
						<view class="text">作品名称</view>
					</view>
					<!-- <view class="q1" @click="goPage">前往创作</view> -->
				</view>
			</view>
			<view class="u-p-l-32 u-p-r-32">
				<view class="input1 pop text-center u109" style="padding:0;color:#fff">
					<u-input   placeholder-style="pclass" style="padding:0;color:#fff" v-model="opus_name"  placeholder="请输入作品名称" type="type" :border="false" class="u-h-90" :auto-height="true" />
				</view>
			</view>
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-between align-center w100" style="width:100%">
					<view class="flex justify-between align-center">
						<image src="/static/images/34.png" class="img-16" mode=""></image>
						<view class="text">作品描述</view>
					</view>
					<!-- <view class="q1" @click="goPage">前往创作</view> -->
				</view>
			</view>
			<view class="u-p-l-32 u-p-r-32">
				<view class="input1 pop text-center" >
					<u-input   placeholder-style="pclass" v-model="countTxt"  placeholder="画面描述建议：· 以简练的短语描述画面，建议40个字符以上；· 选择合适的风格和高级参数可提升图像的艺术效果。· 支持中英双语输入。" type="textarea" :border="false" :height="279" :auto-height="true" />
					<view class="flex justify-between align-center tt0" style="border:0">
						<view class="flex align-center">
						</view>
						<view class="flex align-center t2" >
							<view>{{countTxt.length}}/1000</view>
						</view>

					</view>
				</view>
			</view>

			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-between align-center w100" style="width:100%">
					<view class="flex justify-between align-center">
						<image src="/static/images/34.png" class="img-16" mode=""></image>
						<view class="text">信息公开范围</view>
					</view>
					<!-- <view class="q1" @click="goPage">前往创作</view> -->
				</view>
			</view>
			<view class="u-p-l-32 u-p-r-32 u-m-b-20">
				<view @click="stateshow = true" class="input1 pop text-center u-h-90" style="padding:0">
					{{state_class[stateListIndex].label || '信息公开范围'}}
					<image src="/static/images/img/37.png" class="m1" style="width:22rpx;height:12rpx"></image>
				</view>
			</view>
	
			<view class="myBtn" @click="go">
				<view class="one">确认提交</view>
			</view>
			
			<!-- 分类 -->
			<u-select
				:list="goods_class" 
				v-model="goodshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[goodsListIndex]"
				@confirm="goodsCallback"
			></u-select>
			
			<!-- 状态 -->
			<u-select
				:list="state_class" 
				v-model="stateshow" 
				value-name="value" 
				label-name="label" 
				confirm-color="#000000" 
				:default-value="[stateListIndex]"
				@confirm="stateCallback"
			></u-select>
			<u-toast ref="uToast" />
		</view>
		
		<u-popup class="pop-draw-tag" width="100%" safe-area-inset-bottom :closeable="false" mode="right" v-model="imagesListShow">
			
			<view class="pop-draw-tag-box">
				<view class="draw_tag_style">
					<view class="draw_tag_style_head">
						<view class="draw_tag_icon" @click="imagesListShow=!imagesListShow"><u-icon name="arrow-left"></u-icon></view>
						<view class="draw_tag_style_tabs" >
							选择AI创作
						</view>
					</view>
				</view>
				<view class="image-title">选择AI创作</view>
				
				<view class="image-desc"><view>本期大赛，每位用户仅限提交2幅作品</view><view>(无论作品是否通过审核均视为有效提交)</view></view>
				<view class="image-list-title">创作的作品</view>
				
				<view class="flex  align-center flex-wrap image-list">
					<view v-for="(item, index) in imagesList.data" :key="index">
						<view class="itemS" @click="imagesCheckedFun(index)">
							<image :src="item.picture_url" style="width:100%;height:100%"></image>
							
							<view class="check-box"><u-checkbox active-color="#caf45c" v-model="item.checked" :label-disabled="false" ></u-checkbox></view>
						</view>
					</view>
				</view>
				
				<view class="flex justify-between align-center endP">
					<view class="generate" @click="imagesListShow=!imagesListShow">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import count from '../../../components/count.vue'

	export default {
		components: {
			count
		},
		data() {
			return {
				header: {
					token: uni.getStorageSync('token'),
					lang: uni.getStorageSync('lang'),
				},
				formData: {},				
				countTxt:'',
				active:0,
				type: 0,
				screening: [],
				// 分类
				goods_class:[],
				goodshow:false,
				goodsListIndex:0,
				goodsName: '',

				// 状态
				state_class:[],
				stateshow:false,
				stateListIndex:0,
				show_type:0,   //状态传参
				name:[],
				activityid  : '' ,
				draw_id : '' ,
				describe : '' ,
				opus_name : '' ,
				imagesListShow: false,
				imagesList: [],
				imagesChecked: '',
 			};
		},
		onShow() {
			
			this.name = uni.getStorageSync('name');
			//this.$forceUpdate(this.name)
			

		},
		onLoad(name) {
			this.activityid  = name.id
			this.getDataList()
			this.getImagesList()
			this.getVisibilityList()
		},
		onPullDownRefresh() {
		},
		onReachBottom() {
		},
		methods: {
			txt(data){
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					}
				});
			},
			go09(url){
				uni.navigateTo({
					url:url
				})
			},
			getImagesList(){
				this.$u.api.opuslist({ limit: 30, page:1, status:4}).then(res => {
					
					this.imagesList = res.data
					this.imagesList.data.forEach((item)=>{item.checked=false})
					// console.log(this.imagesList)
				})
			},
			getVisibilityList(){
				this.$u.api.visibilitylist({}).then(res => {
					
					this.state_class = res.data
					// this.VisibilityList.data.forEach((item)=>{item.checked=false})
					// console.log(this.imagesList)
				})
			},
			imagesCheckedFun(index){
				
				this.imagesList.data.forEach((item)=>{item.checked=false})
				
				// this.imagesList.data[index].checked = true
				this.$set(this.imagesList.data, index,{...this.imagesList.data[index],checked:true})
				this.draw_id = this.imagesList.data[index].draw_id
				this.imagesChecked = true
				console.log(this.draw_id)
			},
			goPage(){
				uni.switchTab({
					url: '/pages/tabbar/bazaar/bazaar-second'
				})
			},
			go(){
			  // model_code  	
			  //    
			  //      
			  let that = this
			  let obj = {
				activityid  : this.activityid ,
				draw_id : this.draw_id ,
				describe : this.countTxt ,
				opus_name : this.opus_name ,
				visibility: this.show_type
			  }
			  uni.showModal({
					title: '提示',
					content: '确定要投稿吗？',
					success: data => {
						if (data.confirm) {
							that.$u.api.indexactivitsave_entry(obj).then(res => {
							if(res.code == 200){
								uni.showToast({
									title:"投稿成功",
									icon:"none"
								})
								
							}
							this.activityid = ''
							this.screeningId = ''
							this.countTxt = ''
							this.opus_name = ''
							//that.getOne()
								// this.init()
								// this.$emit('restart')
							})
						}
					}
				});
			},
			succ(){
				// this.modelArray.forEach((item)=> item.flag = true)
				// this.modelArray.forEach((item)=>{
				// 	item.flag = true
				// })
				this.modelArrayshow = false
			},
			getDataList(type) {
				let that = this
				this.$u.api.indexactivity({ limit: 30, page:1}).then(res => {
					
					that.goods_class = res.data.data
					that.goods_class.forEach((item)=>{
						if(item.id == that.activityid){
							that.goodsName = item.name
							return
						}
					})
				})
			},
			goodsCallback(index){
				console.log(index);
				this.goodsName = index[0].label;
				this.goodshow = false
			},
			stateCallback(index){
				console.log(index);
				this.stateListIndex = index[0].value;
				this.show_type = index[0].value
				// this.loadData(true, false)
			},
		}
	}
</script>

<style lang="scss" scoped>

.myBtn{
	width: 686rpx;
	height: 90rpx;
	background: #CAFD5C;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
.myBtn .one{
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 80rpx;
}
.myBtn .two{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #000000;
	line-height: 28rpx;
}



.add{
	width: 62rpx;
	height: 62rpx;
	background: rgba(255,255,255,0.15);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	border: 2rpx solid rgba(255,255,255,0.1);
	font-size: 20px;
	text-align: center;
}

.pop ::v-deep .u-drawer-bottom{
	background: #242424;
	height: 864rpx!important;
}



.itemS{
	position: relative;
	width: 214rpx;
	height: 102rpx;
	margin-bottom: 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
	border: 1px solid #000;
}
.itemS text{
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 33rpx;
	position: absolute;
	width: 214rpx;
	height: 46rpx;
	background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	display: block;
	left: 6rpx;
	bottom: 0rpx;
	line-height: 46rpx;
}
.pclass{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	line-height: 28rpx;
}
.tt0{
	border-top: 1px solid #4a4a4a;
	padding-top: 22rpx;
}
.t2{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 28rpx;

}
.q1{
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 28rpx;
}
.u-h-90{height: 90rpx;line-height: 90rpx;}
.u109 ::v-deep .u-input__input{
	height: 90rpx;
	line-height: 90rpx;
	padding: 0 15px;
	color:#fff
}
.m1{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.t2 ::v-deep textarea,.input1 ::v-deep textarea{color: #fff;}
.input1{
	border:1px solid #4b4b4b;
	border-radius: 20rpx;
	background: #191919;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.t1 view{font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 33rpx;
	margin-bottom:6rpx
}
.t1 text{font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	line-height: 28rpx;}
.popsty{padding:54rpx 32rpx;box-sizing:border}
.popsty .tit{
	font-size: 32rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 38rpx;
}
.mallunavbar ::v-deep .u-m-r-30{margin-right:0!important} 



	.page {
		background-size: 100% 180rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		// background-color: #FBF7F2;

		.home-sdchange{
			width: 100%;
			height: 74rpx;
			border-radius: 10rpx;
			padding: 0 30rpx;
			color: #999999;
			position: relative;
			.sdchange_icon{
				position: absolute;
				top: -20rpx;
				.metaimg{
					width: 90rpx;
					height: 30rpx;
					padding-left: 15rpx;
				}
			}
			.sdchange_text{
				width: 50%;
				.text{
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(255,255,255,0.8);
					padding-left: 15rpx;
				}
			}
			.sdchange_switch{
				width: 50%;
				height: 54rpx;
				font-size: 22rpx;
				color: #000000;
				padding: 0 20rpx;
				border-radius: 12rpx;
				background: linear-gradient(90deg, #ACF887 0%, #86F9AF 100%, #86F9AF 100%);
			}
		}
	}
	.mallunavbar{
	//	box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(134, 249, 175, 0.3);
		.malltab{
			width: 100%;
			height: 88rpx;
			padding: 0 32rpx 0 32rpx;
			.text_green{
				color: #73F6A2;
			}
		}
	}
	.author-avatar{
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
	}
	.soldout{
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		border-radius: 0 0 0 20rpx;
		padding: 8rpx 15rpx;
		font-size: 26rpx;
		color: #eee;
		z-index: 1;
	}



	.popup_title {
		margin: 52rpx auto 60rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	/deep/.u-close--top-right {
		top: 54rpx;
		right: 44rpx;
	}



	.popular {
		margin-bottom: 42rpx;
		display: flex;
		flex-wrap: wrap;

		.popular_item {
			padding: 22rpx 52rpx;
			border: 1px solid #D4D4D4;
			border-radius: 10rpx;
			margin: 0 16rpx 20rpx 0;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.bot_btn {
		display: flex;
		margin: 96rpx 32rpx 62rpx;

		button {
			flex: 1;
			border-radius: 10rpx;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		button+button {
			margin-left: 18rpx;
		}

		.reset {
			border: 1px solid #C7CFD4;
			background-color: #fff;
			color: #333333;
		}

		.finish {
			background-color: #764E39;
			color: #fff;
		}
	}

	.checked_style {
		border: 1px solid !important;
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 50rpx;
		height: 50rpx;
		margin-left: -25rpx;
		margin-top: -25rpx;
	}
	.ai-images {		
		width: 100%;
		height: 360rpx;
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid #000;
		padding: 0;
		margin: 0;
	}
	.selecte-image{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,0.8);
		display: flex; align-items: center;justify-content:center;padding: 40rpx;
	}
	.pop-draw-tag {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow-y: hidden; /* 隐藏外部滚动条 */
		
		.pop-draw-tag-box {
	
			z-index:9999;
			background-color:#000000;
			height: 100vh;
			// width:100%;
			// padding:16rpx 32rpx;
			.draw_tag_style {
				width: 100%;
				position:fixed;
				top:0;
				padding: 20rpx 30rpx;
				background-color: #000000;
				z-index: 99999;
				.draw_tag_icon{
					display: block;
				}
				.draw_tag_style_head{
					display: flex;
					align-items: center;
					.draw_tag_style_tabs {
						width: 100%;
						text-align: center;
						
					}
						  
					.draw_tag_style_label {
						// margin-left: 10px;
					}
					
					
				}
				
			}
			
			.image-title {
				margin-top: 78rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				padding: 30rpx;
			}
			.image-desc {
				padding: 0 150rpx;
				color: grey;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				text-align: center;
			}
			
			.image-list-title{
				padding: 30rpx;
				color: grey;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
			}
			.image-list{
				position: relative;
				margin: 30rpx;
				border-radius: 10px;
				overflow: hidden;
				border: 1px solid #000;
				.itemS{
					position: c;
					width: 170rpx;
					height: 170rpx;
					border-radius: 20rpx;
					overflow: hidden;
					border: 1px solid #000;
					.check-box{
						position: relative;
						top: -174rpx;
						left:128rpx;
						::v-deep .u-checkbox__icon-wrap--checked .u-iconfont{
							color: #000 !important;
						}
					}
				}
			}
				
			.endP{
				position:fixed;
				bottom:0;
				left:0;
				z-index:10;
				background-color:#000000;
				width:100%;
				padding:16rpx 32rpx;
				.generate{
					font-size: 28rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 33rpx;
					background-color:#caf45c;
					border-radius:20rpx;
					height:88rpx;
					line-height:88rpx;
					width:100%;
					text-align:center;
				}
			}
			
		}
		
	}
	
</style>
